<template>
  <el-dialog :title="'排房'" :close-on-click-modal="false" :visible.sync="visible" :append-to-body="true">
    <div class="roomPicker" v-loading="selectRoomLoadding" :element-loading-text="$t('Common.LoadingText')">
      <div class="flexBox">
        <div>
          <label style="flex-shrink: 0;">房型</label>
          <ul>
            <li class="VC" style="text-align: center;">
              {{ this.selRow.row.roomName }}
              <!-- {{ item.count ? item.count : '0' }} -->
              <i class="el-icon-check g_icon"></i>
            </li>
          </ul>
        </div>
      </div>
      <div class="flexBox">
        <div>
          <label style="flex-shrink: 0;">房态</label>
          <ul>
            <li
              @click="selTag(item, index, 'type')"
              v-for="(item, index) in colorName"
              :key="index"
              class="VC"
              style="text-align: center;"
              :style="'border-left: 3px solid ' + color[index]"
            >
              {{ item.name }}
              <!-- {{ typeMap[index + ''] ? typeMap[index + ''] : '0' }} -->
              <i v-if="item.checked" class="el-icon-check g_icon"></i>
            </li>
          </ul>
        </div>
      </div>

      <div class="flexBox">
        <div>
          <div class="roomList">
            <div class="flexBox">
              <div class="special_td">
                <div class="clear_float">
                  <span>已排房: {{ dataList.filter(item => item.checked).length }} / 1 间</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="flexBox">
        <div>
          <div class="roomList">
            <div class="flexBox">
              <div class="special_td">
                <div class="clear_float">
                  <el-tag effect="plain" v-for="item in dataList.filter(item => item.checked)" :key="item.name" closable @close="item.checked = false">
                    {{ item.roomSign }}{{ item.roomNum }}
                  </el-tag>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="flexBox">
        <div>
          <div class="roomList">
            <div class="flexBox">
              <div>
                <ul>
                  <li
                    v-for="(item, index) in dataList"
                    :key="item.id"
                    @click="roomClickselBtn(item)"
                    :style="'border-left: 3px solid ' + (color[item.type + ''] ? color[item.type + ''] : color['0'])"
                    style="position: relative;"
                  >
                    {{ item.roomSign }}{{ item.roomNum }}
                    <i v-if="item.checked" class="el-icon-check g_icon"></i>
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div style="text-align: right;" solt="footer">
        <el-button @click="visible = false">{{ $t('Common.Cancel') }}</el-button>
        <el-button type="danger" @click="dataFormSubmit">确定</el-button>
      </div>
      <!-- 房间 -->
    </div>
  </el-dialog>
</template>

<script>
export default {
  data() {
    return {
      selRow: {
        index: 0,
        row: {}
      },
      dataForm: {
        key: '',
        floorIds: ''
      },
      color: {},
      colorName: [
        {
          name: '空净',
          checked: false
        },
        {
          name: '空脏',
          checked: false
        },
        {
          name: '住净',
          checked: false
        },
        {
          name: '住脏',
          checked: false
        }
      ],
      selectRoomLoadding: false,
      visible: false,
      dataList: [],
      stratDate: '',
      stopDate: '',
      roomList: [],
      oldRow: {},
      roomCount: 0
    };
  },
  methods: {
    roomClickselBtn(item) {
      // this.dataList.forEach(item2=>{
      //   item2.checked == false
      // })
      // item.checked = !item.checked
      if (!item.checked) {
        //检查是否超出可排房数量
        if (1 - this.dataList.filter(item => item.checked).length > 0) {
          item.checked = !item.checked
        } else {
          this.$message.error("超出可排房数：1");
        }
      } else {
        item.checked = !item.checked
      }
    },
    init(row,date1,date2) {
      this.stratDate = date1
      this.stopDate = date2
      console.log(row);
      this.oldRow = row;
      this.selRow.row = row;
      this.visible = true;
      this.getfangtaiTypeList();
      this.getDataList();
    },
    selTag(item, index, sign) {
      var checked = item.checked;
      if (sign == 'type') {
        this.colorName.forEach(item => {
          item.checked = false;
        });
        item.checked = !checked;
      }
      if (sign == 'room') {
        this.roomList.forEach(item => {
          item.checked = false;
        });
        item.checked = !checked;
      }
      this.getDataList();
    },
    // 表单提交
    dataFormSubmit() {
      //看看是否没做改变
      var arrList = this.dataList.filter(item => item.checked)
      if (this.selRow.row.floorRoomId != arrList[0].id) {
        this.selectRoomLoadding = true;
        //发起请求
        this.$http({
          url: this.$http.adornUrl(`/hotel/roomReservation/single_row_room/${this.selRow.row.id}`),
          method: 'get',
          params: this.$http.adornParams({
            floorRoomId: arrList[0].id
          })
        }).then(async ({ data }) => {
          if (data && data.code === 0) {
            if (arrList.length > 0) {
              this.selRow.row.floorRoomEntity = arrList[0]
              this.selRow.row.floorRoomId = arrList[0].id;
              this.$emit('refreshDataList')
            } else {
              this.selRow.row.floorRoomEntity = null;
              this.selRow.row.floorRoomId = null;
            }
            this.visible = false;
          } else {
            this.$message.error(data.msg);
          }
          this.selectRoomLoadding = false;
        });
      } else {
         this.visible = false;
      }
    },
    //过滤预定房间
    filterReserveRoom(item) {
      console.log(item)
      if (item.isSingle == 4) {
        console.log(item.id == this.selRow.row.floorRoomId)
        if (item.id == this.selRow.row.floorRoomId) {
          return true
        }
        return false
      } else {
        return true
      }
    },
    // 获取房态数据列表
    getDataList() {
      this.selectRoomLoadding = true;
      //房间状态类型
      var types = '';
      this.colorName.forEach((item, index) => {
        if (item.checked) {
          types += index + ',';
        }
      });
      types = types.substring(0, types.length - 1);
      this.$http({
        url: this.$http.adornUrl(`/hotel/thotelfloorroomcheckinsingle/room_view_list`),
        method: 'get',
        params: this.$http.adornParams({
          startDate: this.stratDate,
          endDate: this.stopDate,
          types: types,
          type: 2,
          roomId: this.selRow.row.roomId
        })
      }).then(async ({ data }) => {
        console.log(data);
        this.selectRoomLoadding = false;
        if (data && data.code === 0) {
          console.log(data);
          this.dataList = data.data
            .filter(item => this.filterReserveRoom(item))
            .map(item => ({
              ...item,
              checked: false
            }));
          for (var i = 0; i < this.dataList.length; i++) {
            var flag = await this.filterRoom(this.dataList[i]);
            if (flag) {
              this.dataList[i].checked = true;
            }
          }
        } else {
          this.$message.error(data.msg);
        }
      });

      // var types = '';
      // this.colorName.forEach((item, index) => {
      //   if (item.checked) {
      //     types += index + ',';
      //   }
      // });
      // types = types.substring(0, types.length - 1);
      // //房型类型
      // var roomIds = '';
      // this.roomList.forEach((item, index) => {
      //   if (item.checked) {
      //     roomIds += item.roomId + ',';
      //   }
      // });
      // roomIds = roomIds.substring(0, roomIds.length - 1);
      // this.$http({
      //   url: this.$http.adornUrl('/hotel/thotelfloorroom/roomState'),
      //   method: 'get',
      //   params: this.$http.adornParams({
      //     key: this.dataForm.key,
      //     types: types,
      //     rooms: roomIds,
      //     floors: this.dataForm.floorIds
      //   })
      // }).then(async ({ data }) => {
      //   this.selectRoomLoadding = false;
      //   if (data && data.code === 0) {
      //     this.dataList = data.data.data
      //       .filter(item => item.type != 4 && item.lockType == 1 && item.isSingle == 0 && item.roomId == this.selRow.row.id)
      //       .map(item => ({
      //         ...item,
      //         checked: false
      //       }));
      //     for (var i = 0; i < this.dataList.length; i++) {
      //       var flag = await this.filterRoom(this.dataList[i]);
      //       if (flag) {
      //         this.dataList[i].checked = true;
      //       }
      //     }
      //   } else {
      //     this.dataList = [];
      //   }
      // });
    },
    async filterRoom(item) {
      var row = this.oldRow;
      if (item.id == row.floorRoomId) {
        return true;
      }
      return false;
    },
    // 获取房态数据列表
    getfangtaiTypeList() {
      this.$http({
        url: this.$http.adornUrl('/hotel/thotelfloorroom/roomStateOptions'),
        method: 'get',
        params: this.$http.adornParams({
          key: this.dataForm.key,
          floors: this.dataForm.floorIds
        })
      }).then(({ data }) => {
        if (data && data.code === 0) {
          this.color = data.data.color;
          this.typeMap = data.data.typeMap;
          this.roomList = data.data.roomList.map(item => ({
            ...item,
            checked: false
          }));
          this.floorOptions = data.data.floorList;
          this.typeMapCount = data.data.typeMapCount;
          this.setting = data.data.setting;
          this.roomCount = 0;
          data.data.roomList.forEach(item => {
            this.roomCount += item.count;
          });
        } else {
          this.dataList = [];
        }
      });
    }
  }
};
</script>

<style>
.roomPicker .roomList ul > li {
  margin: 5px;
  width: 68px;
  text-align: center;
}
.roomPicker ul > li {
  float: left;
  margin-left: 5px;
  padding: 3px 8px;
  cursor: pointer;
  border-radius: 5px;
  border: 1px solid #d9d9d9;
  margin-bottom: 5px;
  position: relative;
}
.g_icon {
  position: absolute;
  color: #f24e4c;
  bottom: -2px;
  right: -1px;
  line-height: normal;
  border-bottom-right-radius: 4px;
  overflow: hidden;
}
.roomPicker ul {
  list-style-type: none;
  padding-left: 0px;
  margin-top: 0px;
}
.roomPicker ul > li:hover {
  border: 1px solid #f24e4c !important;
  color: #f24e4c;
  background-color: white;
}
.roomPicker ul > li.disabled:hover {
  border: 1px solid #d9d9d9 !important;
  color: inherit;
  background: transparent;
  cursor: default;
}
.flexBox,
.flexBox > div {
  display: flex;
  align-items: center;
}
.flexBox {
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
}

.ant-layout-footer {
  background: #fff;
  text-align: right;
  border-top: 1px solid #e8e8e8;
}
.special_td {
  line-height: 20px;
  background: #f7f7f7;
  padding: 10px;
  border-radius: 3px;
  color: #000;
}
.el-tag {
  margin-right: 5px;
}

.el-tag:last-child {
  margin-right: 0px;
}
</style>
